import React, { memo } from 'react'

import MXTopBanner from './c-cpns/top-banner'
import MXHotRecommend from './c-cpns/hot-recommend';
import MXNewAlbum from './c-cpns/new-album';
import MXRecommendRanking from './c-cpns/recommend-ranking';
import MXUserLogin from './c-cpns/user-login';
import MXSettleSinger from './c-cpns/settle-singer';
import MXHotAnchor from './c-cpns/hot-anchor';
import {
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from './style'

function MXRecommend(props) { 
  return (
    <RecommendWrapper>
      <MXTopBanner/>
      <Content className="wrap-v2">
        <RecommendLeft>
          <MXHotRecommend/>
          <MXNewAlbum/>
          <MXRecommendRanking/>
        </RecommendLeft>
        <RecommendRight>
          <MXUserLogin/>
          <MXSettleSinger/>
          <MXHotAnchor/>
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  )
}

export default memo(MXRecommend)